import React, { Fragment } from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import { Button, Card, Tag, Modal, Select, Icon, Spin } from 'antd'
import List from "./List";
import DoRecharge from "./doRecharge";
import DoRecharge1 from "./doRecharge1";
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import moment from 'moment';

const recharges = ({ location, dispatch, recharge, loading }) => {
  location.query = queryString.parse(location.search);

  const {
    items,
    pagination,
    visible,
    rechargeLogId,
    rechargePath,
    balance,
    accumulated,
    currentType,
    shops,
    tenant,
    visibleTenant,
    hasMoney,
    currentTenant,
    currentTenantId,
    currentSaleDistributor,
    totalToProfits,
    thirdAccountId,
    offOrOnline,
    isCustomize
  } = recharge;

  const breadcrumbList = [
    {
      title: '财务管理'
    }, {
      title: currentType === "shop"
        ? "门店充值"
        : "租户充值"
    }
  ];

  const columnsHead = [
    {
      title: '充值编号',
      dataIndex: 'num',
      key: 'num',
      width: "18%"
    }, {
      title: '充值金额(元)',
      dataIndex: 'amountMoney',
      key: 'amountMoney',
      width: "18%",
      render: (text, record, index) => (record.amountMoney)
    }, {
      title: 'payId',
      dataIndex: 'payId',
      key: 'payId',
      width: "10%",
      render: (text, record, index) => (record.onlineType === 'OFFLINE' ? '' : text)
    }]
  const columnsEnd = [
    {
      title: '付款时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: "18%",
      render: (text, record, index) => (moment(record.createTime).format("YYYY-MM-DD HH:mm:ss"))
    }, {
      title: '状态',
      dataIndex: 'rechargeAuditStatus',
      key: 'rechargeAuditStatus',
      width: "18%",
      render: (text, record, index) => (record.rechargeAuditStatus === 0
        ? "待审核"
        : record.rechargeAuditStatus === 5
          ? "审核不通过"
          : "审核通过")
    }
  ]
  const tenantMiddleColumn = [
    {
      title: '充值方式',
      dataIndex: 'onlineType',
      key: 'onlineType',
      width: "18%",
      render: (text, record, index) => (_.isEmpty(record.onlineType) ? "" : record.onlineType === "ONLINE" ? "分销预付款-线上" : "分销预付款-线下")
    }
  ]
  const rechargeColumns = currentType === "shop" ? [...columnsHead, ...columnsEnd] : [...columnsHead, ...tenantMiddleColumn, ...columnsEnd];



  const listProps = {
    dataSource: items,
    loading: loading.effects['recharge/query'],
    pagination,
    pageChangeAction: 'recharge/query',
    dispatch,
    location,
    columns: rechargeColumns
  };

  const showRecharge = (status) => {
    dispatch({
      type: 'recharge/showRecharge',
      payload: {
        visible: status
      }
    })
  };

  const doRechargeProps = {
    visible,
    showRecharge,
    dispatch,
    rechargeLogId,
    rechargePath,
    balance,
    currentType,
    shops,
    currentSaleDistributor,
    isCustomize
  }
  const outlineRecharge = (status) => {
    dispatch({
      type: 'recharge/showRechargeTenant',
      payload: {
        visible: status
      }
    })
  }
  const setOffOrOnline = (type) => {
    dispatch({
      type: 'recharge/setOffOrOnline',
      payload: {
        offOrOnline: type
      }
    })
  }
  const tenantdoRechargeProps = {
    visible: visibleTenant,
    currentTenant,
    currentTenantId,
    outlineRecharge,
    dispatch,
    rechargeLogId,
    rechargePath,
    balance,
    currentType,
    tenant,
    offOrOnline,
    onOk(values) {
      dispatch({
        type: 'recharge/createOutlineBillRecord',
        payload: {
          ...values
        }
      })
    }
  };
  const option = (value) => value.map(option => {
    return <Select.Option value={option.id} key={option.id}>{option.organizationName}</Select.Option>
  })
  const handleChange = (value) => {
    if (value === "init") {
      dispatch({ type: 'recharge/initState' })
    } else {
      const distributor = shops.find(shop => shop.id == value);
      dispatch({
        type: 'recharge/filterDistributor',
        payload: {
          distributor: distributor
        }
      })
      dispatch({
        type: 'recharge/query',
        payload: {
          chargeType: "DISTRIBUTOR_RECHARGE",
          distributorId: value
        }
      })
    }
  }

  return (
    <Spin spinning={loading.global}>
      <PageHeaderLayout
        title={currentType === "shop"
          ? "门店充值"
          : "租户充值"}
        breadcrumbList={breadcrumbList}>
        <Card>
          {currentType === 'shop' && <div
            style={{
              display: "inline",
              marginLeft: "8px"
            }}>
            <Select
              showSearch
              value={currentSaleDistributor.id}
              id="choose"
              style={{
                width: 300,
                marginRight: 8
              }}
              placeholder="筛选门店"
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              onChange={handleChange}>
              {option(shops)}
            </Select>

          </div>}
          {/* {currentType == 'shop' && <Fragment>
          {true && <h1>您当前门店总余额：<span style={{
            color: "red"
          }}>{balance}</span>元</h1>}
          <h4>累计线上充值：<Tag color="red">
            ￥ {accumulated}
            元</Tag>
          </h4>
        </Fragment>
        } */}
          {currentType === 'shop' &&
            <Card style={{ marginTop: 20, width: 400 }} hoverable={true} >
              <Card.Meta
                avatar={<Icon type="wallet" style={{ fontSize: 57 }} />}
                title={<div><span>余额钱包</span> <span style={{ marginLeft: 80 }}>待分润金额</span></div>}
                description={<div><span style={{ fontSize: 20 }}>{loading.global ? "/" : balance}元</span><a onClick={() => {
                  dispatch({
                    type: 'recharge/showBalanceRecords',
                    payload: thirdAccountId
                  })
                }} style={{ position: 'absolute', fontSize: 20, left: 247 }}>{loading.global ? "/" : totalToProfits}元</a></div>}
              />
              {currentType === 'shop' && <div
                style={{
                  position: 'absolute',
                  display: "inline",
                  marginRight: 10
                }}>
                <a
                  icon="red-envelope"
                  style={{ marginLeft: 3.5 }}
                  onClick={() => {
                    showRecharge(true)
                    dispatch({
                      type: 'recharge/setCustomize',
                      payload: {
                        isCustomize: true
                      }
                    })
                  }}>
                  立即充值
            </a>
                <a
                  style={{ marginLeft: 22 }}
                  onClick={() => {
                    console.info(`currentSaleDistributor:${JSON.stringify(currentSaleDistributor)}`);
                    dispatch({ type: 'recharge/showBalanceRecords', payload: currentSaleDistributor.financialAccountId })
                  }}>
                  查看流水
            </a>
              </div>
              }
            </Card>
          }
          {currentType === 'shop' && <h4 style={{ marginTop: 10, marginLeft: 15 }}>累计线上充值：<Tag color="red">
            ￥ {accumulated === null ? 0 : accumulated}
            元</Tag>
          </h4>}
          {currentType == 'tenant' && <Fragment>
            {true && <h1>租户余额：<span style={{
              color: "red"
            }}>{loading.global ? "/" : hasMoney}</span>元</h1>}
            <h4>累计充值：<Tag color="red">
              ￥ {loading.global ? "/" : accumulated}
              元</Tag>
            </h4>
          </Fragment>
          }
          <div style={{
            marginTop: 13
          }}>

            {currentType == 'shop' && <div style={{
              display: "inline"
            }}>
            </div>
            }

            {currentType === 'tenant' && <div
              style={{
                display: "inline",
                marginRight: 10
              }}>
              <Button
                icon="red-envelope"
                type="primary"
                style={{ marginRight: 10 }}
                onClick={() => {
                  outlineRecharge(true);
                  setOffOrOnline("online");
                }}>
                立即充值
            </Button>
              <Button
                icon="red-envelope"
                type="primary"
                onClick={() => {
                  outlineRecharge(true);
                  setOffOrOnline("offline");
                }}>
                线下充值
            </Button>
            </div>
            }
            {currentType == 'tenant' && <div style={{
              display: "inline"
            }}>
              <Button
                icon="sync"
                onClick={() => {
                  dispatch({ type: 'recharge/getTargetMoney', payload: {} })
                  dispatch({
                    type: 'recharge/queryTenant',
                    payload: {
                      chargeType: "TENANT_RECHARGE"
                    }
                  })
                  dispatch({
                    type: 'recharge/getAccumulated',
                    payload: {
                      chargeType: "TENANT_RECHARGE"
                    }
                  })
                }}>
                刷新状态
            </Button>
            </div>
            }

          </div>
        </Card>
        <Card>
          <List {...listProps} />
        </Card>
        {currentType === 'shop' && <DoRecharge {...doRechargeProps} />}
        {currentType === 'tenant' && <DoRecharge1 {...tenantdoRechargeProps} />}

      </PageHeaderLayout>
    </Spin>
  )
};

export default connect(({ recharge, loading }) => ({ recharge, loading }))(recharges)
